<template>
    <div class="teamplate-current">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    <div class="biaoti">
                        结算汇总
                    </div>
                    <div class="control-group form-group" style="margin-left: 10%;">
                        <label class="control-label">开始日期</label>
                        <div class="controls input-append date " style="display:inline-block;" data-date="" >
                            <input size="16" type="text" value="" @change="check1"  class="stopDate form-control form_date" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                            <span class="add-on"><i class="icon-remove"></i></span>
                            <span class="add-on"><i class="icon-th"></i></span>
                        </div>
                        <input type="hidden" id="dtp_input2" value="" /><br/>
                    </div>
                    <div class="control-group form-group">
                        <label class="control-label">结束日期</label>
                        <div class="controls input-append date " style="display:inline-block;" data-date="" >
                            <input size="16" type="text" value="" @change="check2"  class="startDate form-control form_date " data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                            <span class="add-on"><i class="icon-remove"></i></span>
                            <span class="add-on"><i class="icon-th"></i></span>
                        </div>
                        <input type="hidden" id="dtp_input2" value="" /><br/>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default getUserPageList10" @click="enquiries">查询</button>
                    </div>
                    <div class="btn-group text-right" style="text-align: right;float: right;" >
                        <button  type="submit"  class="btn btn-default"  @click="btn_di"> 导出表格</button>
                         <!-- <button  type="submit"  class="btn btn-default" ><a style="color:#fff" :href="cfg.api +'/WRLSController/selectHZDY?file='+yaopinm0+'&title='+yaopinm0+'&rq1='+startDate+'&rq2='+stopDate"  download="a.xlsx"> 导出表格</a></button> -->
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                  <div class="list-h">
                        <div class="btn-group">
                            <button class="btn ">往日交易明细流水</button>
                            <!-- <button class="btn">单日班区域汇总</button>
                            <button class="btn">双日班区域汇总</button>
                            <button class="btn">处方登记核对</button>
                            <button class="btn">{{yaopinm0}}</button>
                            <button class="btn">{{startDate}}</button>
                            <button class="btn">{{stopDate}}</button> -->
                        </div>
                        
                    </div>
                    <div class="table-wrap">
                        <div class="table-box">
                            <table class="table table-striped tc"  >
                                    <tbody>
                                    <tr>
                                        <th style="text-align:left;"  >日期</th>
                                        <th style="text-align:left;"  >天气</th>
                                        <th style="text-align:right;" >客单件</th>
                                        <th style="text-align:right;" >客品数</th>
                                        <th style="text-align:right;" >品单价</th>
                                        <th style="text-align:right;" >应收金额</th>
                                        <th style="text-align:right;" >实收金额</th>
                                        <th style="text-align:right;" >成本金额</th>
                                        <th style="text-align:right;" >金额</th>
                                        <th style="text-align:right;" >毛利</th>
                                        <th style="text-align:right;" >税额</th>
                                        <th style="text-align:right;" >来客数</th>
                                        <th style="text-align:right;" >销售批次</th>
                                    </tr>
                                    <tr v-for="item in cashier">
                                        <td style="text-align:left;" >{{item.rq}}</td>
                                        <td style="text-align:left;">{{item.wether}}</td>
                                        <td style="text-align:right;">{{item.kedj | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.keps | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.pdj | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.ysje | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.sshje | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.chbje | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.je | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.ml | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.she | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.lks}}</td>
                                        <td style="text-align:right;">{{item.xspc}}</td>
                                    </tr>
                                 </tbody>
                            </table>
                        </div>
                        <div class="b-balance clearfix has-border">
                          <div class="pull-left">应收金额
                                <span class="pink">{{zongCashier.ysje | formatPrice}}</span>
                            </div>
                            <div class="pull-left">实收金额
                                <span class="pink">{{zongCashier.sshje | formatPrice}}</span>
                            </div>
                            <div class="pull-left">成本金额
                                <span class="green">{{zongCashier.chbje | formatPrice}}</span>
                            </div>
                            <div class="pull-left">毛利
                                <span class="green">{{zongCashier.ml | formatPrice}}</span>
                            </div>
                            <div class="pull-left">毛利率
                                <span class="purple">{{zongCashier.mll | formatPrice}}%</span>
                            </div>
                        </div>
                        <div class="pager-box clearfix pt15">
                            <div class="pull-left">共计
                                <span class="blue">{{count}}</span>条信息 
                                <!-- <span class="blue">{{count}}</span>个商品 -->
                                </div>
                                <div class="pull-right">
                                    <div id="pagenav10" class="tcdPageCode"></div>
                                </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import bus from "../api/eventBus";
import { setUi, setpopPerfect } from "../vuex/actions";
import { ui, popPerfect } from "../vuex/getters";
export default {
  components: {},
  data() {
    return {
      v: 1686,
      cashier: "",
      zongCashier: "",
      count: "",
      yaopinm0:'',
      startDate:'',
      stopDate:'',
      fdbs:''
    };
  },
  watch: {},
  vuex: {
    getters: {
      ui,
      popPerfect
    },
    actions: {
      setUi,
      setpopPerfect
    }
  },
  methods: {
    enquiries(e) {
      let me = this;
      me.getUserPageList10 = function(curr) {
        var parm = {
          page: curr || 1,
          rows: me.row,
          rq1: $(".startDate").val(),
          rq2: $(".stopDate").val(),
          fdbs:me.fdbs
        };
        console.log(parm);
        $.ajax({
          type: "get",
          url: me.cfg.api + "/WRLSController/selectHZ",
          data: parm,
          dataType: "json",
          success: function(data) {
            console.log("===收款员总结汇总===");
            console.log(data);
            if (data.code == 200) {
              if (data.data.hz.length != 0) {
                me.cashier = data.data.hz;
                me.count = data.data.count;
                console.log(me.cashier, "12345678");
                for (var k = 0; k < data.data.hztj.length; k++) {
                  me.zongCashier = data.data.hztj[0];
                  console.log(me.zongCashier);
                }
              } else {
                layer.alert("没有查到数据哦");
              }
            }
            laypage({
              cont: "pagenav10", //容器。值支持id名、原生dom对象，jquery对象,
              pages: data.data.pagCount, //总页数
              first: "第一页",
              last: "最后一页",
              curr: curr || 1, //当前页
              jump: function(obj, first) {
                //触发分页后的回调
                if (!first) {
                  //点击跳页触发函数自身，并传递当前页：obj.curr
                  me.getUserPageList10(obj.curr);
                }
              }
            });
          }
        });
      };

      me.getUserPageList10();
    },
    check1(e){
             let me = this;
             var a = /^(\d{4})-(\d{2})-(\d{2})$/
             if (!a.test($('.stopDate').val())) { 
              layer.msg("日期格式不正确!");
             return false 
            } 
        },
        check2(e){
             let me = this;
             var a = /^(\d{4})-(\d{2})-(\d{2})$/
             if (!a.test($('.startDate').val())) { 
              layer.msg("日期格式不正确!");
             return false 
            } 
        },
         btn_di(e){
            let me = this;
            var yaopinm0="结算汇总";
            var downloadToken = +new Date();
            var _self=this;
			var url =me.cfg.api +'/WRLSController/selectHZDY?file='+yaopinm0+'&title='+yaopinm0+'&rq1='+$('.startDate').val()+'&rq2='+$('.stopDate').val()+'&fdbs='+me.fdbs;
      
			var obj = {
				time: downloadToken,
                url: url,
                _self:_self,
			}
			exportExcelForm(obj);
        }
  },
  mounted() {
     let me = this;
     me.fdbs= localStorage.getItem("fdbs"); 
     console.log(me.fdbs,'分店表示');
      var user = JSON.parse(sessionStorage.getItem("user"));
     
    if (!user) {
      router.push({
        path: "/login"
      });
      return;
    }
    
    function priceSorter(a, b) {
      alert(1);
      a = +a.substring(1); // remove $
      b = +b.substring(1);
      if (a > b) return 1;
      if (a < b) return -1;
      return 0;
    }
    // let me = this;
    var time = new Date();
    let fullYear = time.getFullYear();
    let getMonth = time.getMonth() + 1;
    let getDate = time.getDate();
    if (getDate.toString().length == 2) {
      me.getDate = getDate;
    } else {
      me.getDate = "0" + getDate;
    }
    me.today = fullYear + "-" + getMonth + "-" + me.getDate;
    me.closingDate =
      time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + "01"; //默认开始日期
    $(".stopDate").val(me.closingDate); //默认开始日期
    $(".startDate").val(me.today); //默认截止日期
     me.yaopinm0='结算汇总';
     me.stopDate=$('.stopDate').val();
     me.startDate=$('.startDate').val();
      $(".stopDate").change(function(){
        me.stopDate=$('.stopDate').val()
      });
       $(".startDate").change(function(){
         me.startDate=$('.startDate').val()
      });
    $(".form_date").datetimepicker({
      language: "zh-CN",
      weekStart: 1,
      todayBtn: 1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 2,
      minView: 2,
      forceParse: 0
    });
     let winHeight = $(window).outerHeight();
            if(winHeight<=768){
            me.row=14
            }else if(winHeight<=800){
            me.row=16
            }else if(winHeight<=863){
            me.row=20
            }else{
            me.row=22
            }
    me.getUserPageList10 = function(curr) {
      var parm = {
        page: curr || 1,
        rows: me.row,
        rq1: $(".startDate").val(),
        rq2: $(".stopDate").val(),
        fdbs:me.fdbs
      };
      console.log(parm);
      $.ajax({
        type: "get",
        url: me.cfg.api + "/WRLSController/selectHZ",
        data: parm,
        dataType: "json",
        success: function(data) {
          console.log("===收款员总结汇总===");
          console.log(data);
          if (data.code == 200) {
            if (data.data.hz.length != 0) {
              me.cashier = data.data.hz;
              me.count = data.data.count;
              console.log(me.cashier, "12345678");
              for (var k = 0; k < data.data.hztj.length; k++) {
                me.zongCashier = data.data.hztj[0];
                console.log(me.zongCashier);
              }
            } else {
              layer.alert("没有查到数据哦");
            }
          }
          laypage({
            cont: "pagenav10", //容器。值支持id名、原生dom对象，jquery对象,
            pages: data.data.pagCount, //总页数
            first: "第一页",
            last: "最后一页",
            curr: curr || 1, //当前页
            jump: function(obj, first) {
              //触发分页后的回调
              if (!first) {
                //点击跳页触发函数自身，并传递当前页：obj.curr
                me.getUserPageList10(obj.curr);
              }
            }
          });
        }
      });
    };

    me.getUserPageList10();
    $(document).keydown(e => {
      let key = e.keyCode;
      if (key == 13) {
        let me = this;
        me.getUserPageList10 = function(curr) {
          var parm = {
            page: curr || 1,
            rows: me.row,
            rq1: $(".startDate").val(),
            rq2: $(".stopDate").val(),
            fdbs:me.fdbs
          };
          console.log(parm);
          $.ajax({
            type: "get",
            url: me.cfg.api + "/WRLSController/selectHZ",
            data: parm,
            dataType: "json",
            success: function(data) {
              console.log("===收款员总结汇总===");
              console.log(data);
              if (data.code == 200) {
                if (data.data.hz.length != 0) {
                  me.cashier = data.data.hz;
                  me.count = data.data.count;
                  console.log(me.cashier, "12345678");
                  for (var k = 0; k < data.data.hztj.length; k++) {
                    me.zongCashier = data.data.hztj[0];
                    console.log(me.zongCashier);
                  }
                } else {
                  layer.alert("没有查到数据哦");
                }
              }
              laypage({
                cont: "pagenav10", //容器。值支持id名、原生dom对象，jquery对象,
                pages: data.data.pagCount, //总页数
                first: "第一页",
                last: "最后一页",
                curr: curr || 1, //当前页
                jump: function(obj, first) {
                  //触发分页后的回调
                  if (!first) {
                    //点击跳页触发函数自身，并传递当前页：obj.curr
                    me.getUserPageList10(obj.curr);
                  }
                }
              });
            }
          });
        };

        me.getUserPageList10();
      }
    });
  }
};
</script>